<template>
	<view>
		<view class="container" style="width: 750rpx; overflow: hidden">
			<view class="waterfall_left">
				<!-- 选择老师列表 -->
				<view class="selectTeacher" v-if="styleType == 6">
					<view class="big_box">
						<view v-for="(item, i) in listLeft" :key="i">
							<view class="box_h">
								<view class="box_img">
									<!-- <image class="imk" :src="item.image_src"></image> -->
									<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
										<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
									</view>
									<view :class="selectedId == item.id ? 'cancel' : 'qian3'" @click="selectTeacher(item)"></view>
									<view v-if="isShowFree" class="jiad">服务费：￥{{ item.money }}</view>
								</view>
								<view class="zhuangtai">
									<view class="zl">
										{{ item.name }}
										<!-- <view class="jiya">从业7年</view> -->
									</view>
									<view class="zr" :class="{ man: item.day_type != 1 }">
										{{ item.day_type == 1 ? '空' : item.day_type == 2 ? '满' : item.day_type == 3 ? '休' : '' }}
									</view>
								</view>
								<view class="nam_box">
									<view class="name">{{ item.t_type }}</view>
									<view @click.stop="doGood(item, i, 0)" class="dian" :class="{ yic: item.do == 1 }">
										<view class="icon" :class="{ dians: item.do == 1 }"></view>
										{{ item.do == 1 ? item.do_num : '收藏' }}
									</view>
								</view>
								<!-- 	<view class="zl">
									{{item.name}}
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 老师详情列表 -->
				<view class="imgd_box" v-if="styleType == 5">
					<view v-for="(item, i) of listLeft" :key="i">
						<view class="box_cd">
							<!-- <image class="imgt" :src='item.image_src'></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<view class="named_box">
								<view class="nal">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店老师 -->
				<view class="big_box" v-if="styleType == 4">
					<view v-for="(item, i) in listLeft" :key="i">
						<view class="box_h" :style="islike ? 'background:#fff;' : ''" @click="goodsDetail(item.id, item)">
							<view class="box_img">
								<!-- <image class="imk" :src="item.image_src"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
								<view :class="islike ? 'qian2' : 'qian'">{{ item.type == 1 ? '摄影师' : '化妆师' }}</view>
							</view>
							<view class="nam_box">
								<view class="name" :style="islike ? 'color:#111;' : ''">{{ item.name }}</view>
								<view class="dian" :style="islike ? 'color:#EBBE87;' : ''">
									<view @click.stop="doGood(item, i, 0)" :class="item.do == 0 ? 'icon' : 'dians'"></view>
									{{ item.num }}
								</view>
							</view>
							<view class="shopName" :style="islike ? 'color:#999;' : ''">{{ item.shop.shopname }}</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店礼服 -->
				<view class="imgd_box" v-if="styleType == 3">
					<view v-for="(item, i) in listLeft" :key="i">
						<view class="box_cd" v-if="item" @click="goodsDetail(item.id)">
							<view class="tubox">
								<!-- <image class="imgt" style="height:200rpx" :src="item.image_src"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
								<view class="bq">{{ item.price_type == 0 ? '出售' : '出租' }}</view>
							</view>

							<view class="named_box1">
								{{ item.title }}
							</view>

							<view class="mony">
								<view class="ml">
									<view class="min">￥</view>
									{{ item.price }}
								</view>
								<view class="my">￥{{ item.line_price }}</view>
							</view>

							<view class="yans">
								<view class="yanl">
									<view class="kan"></view>
									{{ item.view }}
								</view>
								<view class="yanr">
									<view :class="item.do == 1 ? 'dians' : 'dian'" @click.stop="doGood(item, i, 0)"></view>
									{{ item.num }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店风格 -->
				<view v-if="styleType == 2" class="imgd_box">
					<view v-for="(item, i) in listLeft" :key="i">
						<view v-if="item" class="box_cd" :style="islike ? 'background:#fff' : ''" @click="goodsDetail(item.id, item)">
							<!-- <image class="imgt" style="height:200rpx" :src="item.image_src"></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<template v-if="!islike">
								<view class="named_box">
									<view class="nal">{{ item.name }}</view>
									<view class="nar">{{ item.wedding_type == 1 ? '样片' : '客片' }}</view>
								</view>
								<view class="yans">
									<view class="yanl">
										<view class="kan"></view>
										{{ item.view }}
									</view>
									<view class="yanr" @click.stop="doGood(item, i, 1)">
										<view :class="item.do == 1 ? 'dians' : 'dian'"></view>
										{{ item.num }}
									</view>
								</view>
							</template>
							<template v-else>
								<view class="named_box">
									<view class="nal" style="color: #333">{{ item.name }}</view>
									<!-- <view class="nar">{{item.wedding_type==1?"样片":'客片'}}</view> -->
									<view class="yans" style="width: unset; margin: unset">
										<view class="yanr" @click.stop="doGood(item, i, 1)">
											<view :class="item.do == 1 ? 'dians' : 'dian'"></view>
											{{ item.num }}
										</view>
									</view>
								</view>
								<view class="" style="padding-left: 12rpx; padding-top: 12rpx; font-size: 20rpx; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
									{{ item.shop.shopname }}
								</view>
								<!-- <view class="yans">
									<view class="yanl">
										<view class="kan"></view>
										{{item.view}}
									</view>
									<view class="yanr" @click.stop="doGood(item,i,1)">
										<view :class="item.do==1?'dians':'dian'"></view>
										{{item.num}}
									</view>
								</view> -->
							</template>
						</view>
					</view>
				</view>
				<!-- 婚纱门店首页 -->
				<view v-if="styleType == 1" class="bokl">
					<view v-for="(item, i) in listLeft" :key="i">
						<view class="box_b" @click="goodsDetail(item.toid)" v-if="item">
							<!-- <image class="bimg" :src="item.image_src"></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<view class="tilkm">{{ item.title }}</view>
							<view class="jia">
								<view class="xm">￥</view>
								{{ item.price }}
								<view class="yuan">￥{{ item.scribing_price }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店套系 -->
				<view v-if="styleType == 0">
					<view v-for="(item, index) in listLeft" :key="index">
						<view v-if="item" class="waterfall_item" @click="goodsDetail(item.id)">
							<view class="tubox">
								<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
								<!-- <view v-if="type==3" class="bq">{{item.price_type==0?'出售':'出租'}}</view> -->
							</view>
							<view class="item_info">
								<view class="item_info_shop s24 family f500">#{{ item.shop.shopname ? item.shop.shopname : item.shopname }}</view>
								<view class="item_info_title familytow fblod s28">{{ item.title || item.name }}</view>
								<view class="price_box flex">
									<view class="price_one fblod family s24">￥</view>
									<view class="price_two fblod family">
										{{ item.price }}
									</view>
									<view class="price_three s24 f500 family">￥{{ item.praise || item.scribing_price || 0 }}</view>
								</view>
								<view class="goods_bot_flex flex flexjus">
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/fengxiang.png" mode=""></image>
										{{ item.views }}
									</view>
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/chakan.png" mode=""></image>
										{{ item.to_num }}
									</view>
								</view>
								<!--  #ifdef  MP-WEIXIN -->
								<!-- <slot name="slot{{item.id}}" /> -->
								<!--  #endif -->

								<!-- #ifndef  MP-WEIXIN -->
								<!-- <slot v-bind="item" /> -->
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="waterfall_right">
				<!-- 选择老师列表 -->
				<view class="selectTeacher" v-if="styleType == 6">
					<view class="big_box">
						<view v-for="(item, i) in listRight" :key="i">
							<view class="box_h" v-if="item">
								<view class="box_img">
									<!-- <image class="imk" :src="item.image_src"></image> -->
									<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
										<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
									</view>
									<view :class="selectedId == item.id ? 'cancel' : 'qian3'" @click="selectTeacher(item)"></view>
									<view v-if="isShowFree" class="jiad">服务费：￥{{ item.money }}</view>
								</view>
								<view class="zhuangtai">
									<view class="zl">
										{{ item.name }}
										<!-- <view class="jiya">从业7年</view> -->
									</view>
									<view class="zr" :class="{ man: item.day_type != 1 }">
										{{ item.day_type == 1 ? '空' : item.day_type == 2 ? '满' : item.day_type == 3 ? '休' : '' }}
									</view>
								</view>
								<view class="nam_box">
									<view class="name">{{ item.t_type }}</view>
									<view @click.stop="doGood(item, i, 1)" class="dian" :class="{ yic: item.do == 1 }">
										<view class="icon" :class="{ dians: item.do == 1 }"></view>
										{{ item.do == 1 ? item.do_num : '收藏' }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 老师详情列表 -->
				<view class="imgd_box" v-if="styleType == 5">
					<view v-for="(item, i) of listRight" :key="i">
						<view class="box_cd">
							<!-- <image class="imgt" :src='item.image_src'></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<view class="named_box">
								<view class="nal">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店老师 -->
				<view class="big_box" v-if="styleType == 4">
					<view v-for="(item, i) in listRight" :key="i">
						<view class="box_h" :style="islike ? 'background:#fff;' : ''" @click="goodsDetail(item.id, item)">
							<view class="box_img">
								<!-- <image class="imk" :src="item.image_src"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
								<view :class="islike ? 'qian2' : 'qian'">{{ item.type == 1 ? '摄影师' : '化妆师' }}</view>
							</view>
							<view class="mys">
								<view class="nam_box">
									<view class="name" :style="islike ? 'color:#111;' : ''">{{ item.name }}</view>

									<view class="dian" :style="islike ? 'color:#EBBE87;' : ''">
										<view @click.stop="doGood(item, i, 1)" :class="item.do == 0 ? 'icon' : 'dians'"></view>
										{{ item.num }}
									</view>
								</view>
								<view class="shopName" :style="islike ? 'color:#999;' : ''">{{ item.shop.shopname }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店礼服 -->
				<view class="imgd_box" v-if="styleType == 3">
					<view v-for="(item, i) in listRight" :key="i">
						<view class="box_cd" @click="goodsDetail(item.id)" v-if="item">
							<view class="tubox">
								<!-- <image class="imgt" style="height:200rpx" :src="item.image_src"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
								<view class="bq">{{ item.price_type == 0 ? '出售' : '出租' }}</view>
							</view>

							<view class="named_box1">
								{{ item.title }}
							</view>

							<view class="mony">
								<view class="ml">
									<view class="min">￥</view>
									{{ item.price }}
								</view>
								<view class="my">￥{{ item.line_price }}</view>
							</view>

							<view class="yans">
								<view class="yanl">
									<view class="kan"></view>
									{{ item.view }}
								</view>
								<view class="yanr">
									<view :class="item.do == 1 ? 'dians' : 'dian'" @click.stop="doGood(item, i, 1)"></view>
									{{ item.num }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店风格 -->
				<view v-if="styleType == 2" class="imgd_box">
					<view v-for="(item, i) in listRight" :key="i">
						<view class="box_cd" :style="islike ? 'background:#fff' : ''" @click="goodsDetail(item.id, item)" v-if="item">
							<!-- <image class="imgt" style="height:200rpx" :src="item.image_src"></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<template v-if="!islike">
								<view class="named_box">
									<view class="nal">{{ item.name }}</view>
									<view class="nar">{{ item.wedding_type == 1 ? '样片' : '客片' }}</view>
								</view>
								<view class="yans">
									<view class="yanl">
										<view class="kan"></view>
										{{ item.view }}
									</view>
									<view class="yanr" @click.stop="doGood(item, i, 1)">
										<view :class="item.do == 1 ? 'dians' : 'dian'"></view>
										{{ item.num }}
									</view>
								</view>
							</template>
							<template v-else>
								<view class="named_box">
									<view class="nal" style="color: #333">{{ item.name }}</view>
									<!-- <view class="nar">{{item.wedding_type==1?"样片":'客片'}}</view> -->
									<view class="yans" style="width: unset; margin: unset">
										<view class="yanr" @click.stop="doGood(item, i, 1)">
											<view :class="item.do == 1 ? 'dians' : 'dian'"></view>
											{{ item.num }}
										</view>
									</view>
								</view>
								<view class="" style="padding-left: 12rpx; padding-top: 12rpx; font-size: 20rpx; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
									{{ item.shop.shopname }}
								</view>
								<!-- <view class="yans">
									<view class="yanl">
										<view class="kan"></view>
										{{item.view}}
									</view>
									<view class="yanr" @click.stop="doGood(item,i,1)">
										<view :class="item.do==1?'dians':'dian'"></view>
										{{item.num}}
									</view>
								</view> -->
							</template>
						</view>
					</view>
				</view>
				<!-- 婚纱门店首页 -->
				<view v-if="styleType == 1" class="bokl">
					<view v-for="(item, i) in listRight" :key="i">
						<view class="box_b" @click="goodsDetail(item.toid)" v-if="item">
							<!-- <image class="bimg" :src="item.image_src"></image> -->
							<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
								<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
							</view>
							<view class="tilkm">{{ item.title }}</view>
							<view class="jia">
								<view class="xm">￥</view>
								{{ item.price }}
								<view class="yuan">￥{{ item.scribing_price }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 婚纱门店套系 -->
				<view v-if="styleType == 0">
					<view v-for="(item, index) in listRight" :key="index">
						<view class="waterfall_item" @click="goodsDetail(item.id)" v-if="item">
							<view class="tubox">
								<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
								<view class="" style="border-radius: 8rpx 8rpx 0 0; overflow: hidden">
									<zero-lazy-load :image="item.image_src" :imgMode="imgMode" @load="considerPush" @error="considerPush"></zero-lazy-load>
								</view>
							</view>
							<view class="item_info">
								<view class="item_info_shop s24 family f500">#{{ item.shop.shopname ? item.shop.shopname : item.shopname }}</view>
								<view class="item_info_title familytow fblod s28">{{ item.title || item.name }}</view>
								<view class="price_box flex">
									<view class="price_one fblod family s24">￥</view>
									<view class="price_two fblod family">
										{{ item.price }}
									</view>
									<view class="price_three s24 f500 family">￥{{ item.praise || item.scribing_price || 0 }}</view>
								</view>
								<!-- <view class="goods_bot_flex flex flexjus">
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/fengxiang.png" mode=""></image>
										{{item.sales}}
									</view>
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/chakan.png" mode=""></image>
										{{item.sales}}
									</view>
								</view> -->
								<view class="goods_bot_flex flex flexjus">
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/fengxiang.png" mode=""></image>
										{{ item.views }}
									</view>
									<view class="left_box f500 family flex">
										<image class="left_image" src="/static/shopping/chakan.png" mode=""></image>
										{{ item.to_num }}
									</view>
								</view>
								<!--  #ifdef  MP-WEIXIN -->
								<!-- <slot name="slot{{item.id}}" /> -->
								<!--  #endif -->

								<!-- #ifndef  MP-WEIXIN -->
								<!-- <slot v-bind="item" /> -->
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
// type:
// 0 //商城
// 1 //婚纱
// 2//套系
// 3//婚纱门店风格列表
// 4//婚纱门店礼服列表
// 5//婚纱门店老师列表
export default {
	name: 'zero-waterfall',
	props: {
		// 需要在使用页面 onPageScroll 传进来
		list: {
			type: Array,
			required: true,
			default: []
		},
		// 图片裁剪模式
		imgMode: {
			type: String,
			default: 'widthFix'
		},
		type: {
			type: [String, Number],
			default: 0
		},
		status: {
			type: Number,
			default: 0
		},
		// 样式判断   1  婚纱门店首页最新活动下方列表   2 婚纱门店风格首页列表 3 婚纱门店礼服列表 4婚纱门店老师列表 5纱门店老师详情列表
		styleType: {
			type: [String, Number],
			default: 0
		},
		//婚纱门店老师喜欢列表
		islike: {
			type: Boolean,
			default: false
		},
		listIndex: {
			default: 0
		},
		type_names: {
			default: ''
		},
		selectedIds: {
			type: Number,
			default: 0
		}, //预约选中的老师id
		isShowFree: {
			type: Boolean,
			default: true
		} //老师列表是否显示服务费
	},
	data() {
		return {
			listLeft: [],
			listRight: [],
			newList: [],
			selectedId: 0
		};
	},
	watch: {
		list: {
			handler(newValue, oldValue) {
				// console.log('watch list')
				if (oldValue?.length > 0) {
					this.newList = newValue.slice(oldValue?.length);
				}

				// console.log(oldValue)
				// console.log(newValue)
				// console.log(this.status)

				if (this.status === 1) {
					this.listLeft = [];
					this.listRight = [];
					this.init();
				}
				if (oldValue?.length == 0) {
					this.listLeft = [];
					this.listRight = [];
					this.init();
				}
				this.considerPush();
			},
			immediate: true, // 正确设置
			deep: true // 如果需要深度监听对象内部的变化
		}
		// list(newValue, oldValue) {
		// 	console.log('watch list')
		// 	if (oldValue.length > 0) {
		// 		this.newList = newValue.slice(oldValue.length);
		// 	}
		// 	console.log(oldValue)
		// 	console.log(newValue)
		// 	console.log(this.status)

		// 	if (this.status === 1) {
		// 		this.listLeft = [];
		// 		this.listRight = [];
		// 		this.init()
		// 	}
		// 	this.considerPush()
		// }
	},
	mounted() {
		// console.log('mounted')
		this.selectedId = this.selectedIds;
		this.init();
	},
	methods: {
		//预约选择老师
		selectTeacher(item) {
			if (item.day_type == 2) {
				uni.showToast({
					title: '预约日期内该老师排空已满',
					icon: 'none'
				});
				return;
			}
			if (item.day_type == 3) {
				uni.showToast({
					title: '预约日期内该老师休息',
					icon: 'none'
				});
				return;
			}
			if (this.selectedId == item.id) {
				this.selectedId = '';
				this.$emit('clickTeacher', {});
			} else {
				this.selectedId = item.id;
				this.$emit('clickTeacher', item);
			}
		},
		// 婚纱门店风格列表点赞
		doGood(e, index, types) {
			// types 0 左侧列表 1 右侧列表
			if (!uni.getStorageSync('userInfo').id) {
				this.$wanlshop.msg('请先登录再操作');
				return;
			}
			this.$request({
				url: 'wedding/wedding_user_add',
				method: 'POST',
				data: {
					user_id: uni.getStorageSync('userInfo').id,
					show_id: e.id,
					type: this.type == 3 ? 0 : this.type == 4 ? 2 : this.type == 5 ? 1 : ''
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (res.data.data == 0) {
						if (types == 0) {
							this.listLeft[index].do = 1;
							this.listLeft[index].num++;
						} else {
							this.listRight[index].do = 1;
							this.listRight[index].num++;
						}
					} else {
						if (types == 0) {
							if (this.type == 5 && this.islike) {
								this.listLeft.splice(index, 1);
								return;
							}
							this.listLeft[index].do = 0;
							this.listLeft[index].num--;
						} else {
							if (this.type == 5 && this.islike) {
								this.listRight.splice(index, 1);
								return;
							}
							this.listRight[index].do = 0;
							this.listRight[index].num--;
						}
					}
				} else {
					this.$wanlshop.msg(res.data.msg);
				}
			});
		},
		// 跳转详情页
		goodsDetail(ind, shopInfo) {
			if (this.type == 0) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=' + this.type
				});
			} else if (this.type == 1) {
				let obj = {
					type_id: this.listIndex,
					type_names: this.type_names
				};
				if (obj.type_id == 0) {
					uni.navigateTo({
						url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=' + this.type
					});
				} else {
					uni.navigateTo({
						url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=' + this.type + '&obj=' + JSON.stringify(obj)
					});
				}
			} else if (this.type == 3) {
				let shopDetail = {
					shopname: shopInfo.shop.shopname,
					id: shopInfo.shop.id,
					flag: 1
				};
				this.$store.state.shopsname = shopDetail;
				if (this.islike) {
					uni.navigateTo({
						url: '/pages/manner/detail2?id=' + ind
					});
				} else {
					uni.navigateTo({
						url: '/pages/manner/details?id=' + ind
					});
				}
			} else if (this.type == 4) {
				uni.navigateTo({
					url: '/pages/fullDress/details?id=' + ind
				});
			} else if (this.type == 5) {
				let shopDetail = {
					shopname: shopInfo.shop.shopname,
					id: shopInfo.shop.id,
					flag: 1
				};
				this.$store.state.shopsname = shopDetail;
				uni.navigateTo({
					url: `/pages/teacher/briefIntroduction?shopid=${ind}`
				});
			}
		},
		// 触发重新排列
		init() {
			this.newList = [...this.list];
			// console.log(this.newList);
			this.listLeft = [];
			this.listRight = [];
			if (this.newList.length != 0) {
				this.listLeft.push(this.newList.shift()); //触发排列
			}
		},
		// 清空数据列表
		clear() {
			this.listLeft = [];
			this.listRight = [];
			// 同时清除父组件列表中的数据
			this.$emit('clear', []);
			this.newList = [];
		},

		// 计算排列
		considerPush() {
			if (this.newList.length == 0) return; // 没有数据了
			let leftH = 0,
				rightH = 0; //左右高度
			let index = 0;
			// console.log(this.listLeft);
			// console.log(this.listRight);
			var query = uni.createSelectorQuery().in(this);
			if (this.newList.length > 0) {
				query.selectAll('.waterfall_left').boundingClientRect();
				query.selectAll('.waterfall_right').boundingClientRect();
				query.exec((res) => {
					// console.log(res);
					leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
					rightH = res[1].length != 0 ? res[1][0].height : 0;
					// console.log(leftH);
					// console.log(rightH);
					if (leftH <= rightH) {
						// 相等 || 左边小
						this.listLeft.push(this.newList.shift());
					} else {
						// 右边小
						this.listRight.push(this.newList.shift());
					}
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
view {
	word-break: break-all;
}

.mys {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.shopName {
	margin-left: 20rpx;
	font-size: 22rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 20rpx;
}

.container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
}

.waterfall_left,
.waterfall_right {
	width: 46%;
}

.tubox {
	width: 100%;
	position: relative;

	.bq {
		position: absolute;
		width: 80rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 22rpx;
		bottom: 20rpx;
		left: 20rpx;
	}
}

.waterfall_item {
	width: 100%;
	margin: 10rpx 0 40rpx 0;
	background-color: #ffffff;
	border-radius: 15rpx;
	overflow: hidden;

	.item_img {
		width: 100%;

		image {
			width: 100%;
			overflow: hidden;
		}
	}

	.item_info {
		padding: 10rpx 16upx;

		.item_info_shop {
			color: #e7b77d;
			margin-top: 18upx;
		}

		.item_info_title {
			color: #333333;
			display: -webkit-box;
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-top: 8upx;
			font-weight: 400;
			line-height: 40.2rpx;
		}

		.price_box {
			margin-top: 10upx;

			.price_one {
				color: #ff3f4a;
				margin-top: 20upx;
			}

			.price_two {
				font-size: 44upx;
				font-weight: 600;
				color: #ff3f4a;
			}

			.price_three {
				text-decoration: line-through;
				color: #999999;
				line-height: 70upx;
				margin-left: 12upx;
			}
		}

		.goods_bot_flex {
			margin-top: 10upx;

			.left_box {
				font-size: 20upx;
				color: #666666;
				line-height: 32upx;

				.left_image {
					width: 32upx;
					height: 32upx;
					padding-right: 6upx;
				}
			}
		}
	}
}

.yans {
	width: 300rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	// margin-top: 18rpx;

	.yanl {
		color: #999;
		font-size: 22rpx;

		.kan {
			width: 32rpx;
			height: 32rpx;
			background: url(@/static/manner/yan.png) no-repeat center;
			background-size: 100%;
			display: inline-block;
			vertical-align: middle;
			margin-top: -4rpx;
			margin-right: 6rpx;
		}
	}

	.yanr {
		color: #999;
		font-size: 22rpx;

		.dian {
			width: 32rpx;
			height: 32rpx;
			background: url(@/static/manner/dian.png) no-repeat center;
			background-size: 100%;
			display: inline-block;
			vertical-align: middle;
			margin-top: -6rpx;
			margin-right: 6rpx;
		}

		.dians {
			background: url(@/static/manner/dians.png) no-repeat center;
			background-size: 100%;
			color: #ebbe87;
			width: 32rpx;
			height: 32rpx;
			display: inline-block;
			vertical-align: middle;
			margin-top: -6rpx;
			margin-right: 6rpx;
		}
	}
}

// 婚纱门店首页 最新活动列表
.bokl {
	width: 686upx;
	margin: 20upx auto;
	background: #161616;

	.box_b {
		width: 336upx;
		margin-bottom: 20upx;

		.bimg {
			width: 336upx;
			height: 336upx;
			border-radius: 8upx;
		}

		.tilkm {
			width: 304upx;
			margin: 0 auto;
			margin-top: 16upx;
			color: #eee;
			font-size: 28upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.jia {
			width: 304upx;
			margin: 0 auto;
			color: #ff3f4a;
			font-size: 44upx;
			margin-top: 12upx;

			.xm {
				font-size: 24upx;
				display: inline-block;
			}

			.yuan {
				text-decoration: line-through;
				color: #999999;
				font-size: 24upx;
				display: inline-block;
				margin-left: 12upx;
			}
		}
	}
}

// 婚纱门店 风格
.imgd_box {
	width: 690rpx;
	margin: 0 auto;

	.box_cd {
		background: #161616;
		border-radius: 8rpx;
		padding-bottom: 24rpx;
		width: 336rpx;
		margin-bottom: 14rpx;
		break-inside: avoid-column;

		// 婚纱门店礼服
		.tubox {
			width: 100%;
			position: relative;

			.imgt {
				width: 100%;
			}

			.bq {
				position: absolute;
				width: 80rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				font-size: 22rpx;
				bottom: 20rpx;
				left: 20rpx;
			}
		}

		.named_box1 {
			width: 300rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			color: #fff;
			font-size: 28rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.mony {
			width: 300rpx;
			margin: 0 auto;

			margin-top: 10rpx;

			.ml {
				color: #ff3f4a;
				font-size: 40rpx;
				line-height: 40rpx;
				display: inline-block;

				.min {
					font-size: 24rpx;
					display: inline-block;
				}
			}

			.my {
				display: inline-block;
				color: #999;
				font-size: 26rpx;
				margin-left: 20rpx;
				text-decoration: line-through;
			}
		}

		.yans {
			width: 300rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 18rpx;

			.yanl {
				color: #999;
				font-size: 22rpx;

				.kan {
					width: 32rpx;
					height: 32rpx;
					// background: url(../../static/manner/yan.png)no-repeat center;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
					margin-top: -4rpx;
					margin-right: 6rpx;
				}
			}

			.yanr {
				color: #999;
				font-size: 22rpx;

				.dian {
					width: 32rpx;
					height: 32rpx;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
					margin-top: -6rpx;
					margin-right: 6rpx;
				}

				.dians {
					// background: url(../../static/manner/dians.png)no-repeat center;
					background-size: 100%;
					color: #ebbe87;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
					margin-top: -6rpx;
					margin-right: 6rpx;
				}
			}
		}

		//
		.imgt {
			width: 100%;
			min-height: 100rpx;
			display: block;
		}

		.named_box {
			width: 300rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.nal {
				color: #fff;
				font-size: 28rpx;
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.nar {
				width: 60rpx;
				height: 36rpx;
				background: rgba(235, 190, 135, 0.1);
				border-radius: 4rpx;
				text-align: center;
				line-height: 36rpx;
				color: #ebbe87;
				font-size: 20rpx;
			}
		}

		.yans {
			width: 300rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 18rpx;

			.yanl {
				color: #999;
				font-size: 22rpx;

				.kan {
					width: 32rpx;
					height: 32rpx;
					// background: url(../../static/manner/yan.png)no-repeat center;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
					margin-top: -4rpx;
					margin-right: 4rpx;
				}
			}

			.yanr {
				color: #999;
				font-size: 22rpx;

				.dian {
					width: 32rpx;
					height: 32rpx;
					// background: url(../../static/manner/dian.png)no-repeat center;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
					margin-top: -6rpx;
					margin-right: 4rpx;
				}

				.dians {
					background-size: 100%;
					color: #ebbe87;
					width: 32rpx;
					height: 32rpx;
					display: inline-block;
					vertical-align: middle;
					margin-top: -6rpx;
					margin-right: 4rpx;
				}
			}
		}
	}
}

// 婚纱门店老师
.big_box {
	width: 686upx;
	margin: 0 auto;
	margin-top: 18upx;

	.box_h {
		width: 336upx;
		margin-bottom: 14upx;
		background: #161616;
		border-radius: 8rpx;
		overflow: hidden;
		padding-bottom: 20rpx !important;
		box-sizing: border-box;

		.box_img {
			width: 100%;
			border-radius: 8upx;
			overflow: hidden;
			position: relative;

			.imk {
				width: 100%;
				height: 100%;
			}

			.qian {
				position: absolute;
				left: 20upx;
				top: 20upx;
				width: 100upx;
				height: 48upx;
				background: rgba(17, 17, 17, 0.5);
				border-radius: 24upx;
				text-align: center;
				color: #eeeeee;
				font-size: 22upx;
				line-height: 48upx;
			}

			.qian2 {
				position: absolute;
				right: 20upx;
				top: 20upx;
				width: 100upx;
				height: 48upx;
				background: rgba(17, 17, 17, 0.5);
				border-radius: 24upx;
				text-align: center;
				color: #eeeeee;
				font-size: 22upx;
				line-height: 48upx;
			}
		}

		.nam_box {
			width: 304upx;
			margin: 28upx auto;
			display: flex;
			justify-content: space-between;

			.name {
				color: #fff;
				font-size: 28upx;
				line-height: 32upx;
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.dian {
				color: #999999;
				font-size: 26upx;
				line-height: 30upx;

				.icon {
					width: 30upx;
					height: 30upx;
					background: url(/static/teacher/dian.png) no-repeat center;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
					margin-top: -8upx;
					margin-right: 8upx;
				}

				.dians {
					display: inline-block;
					vertical-align: middle;
					margin-top: -8upx;
					margin-right: 8upx;
					width: 30upx;
					height: 30upx;
					background: url(/static/teacher/dians.png) no-repeat center;
					background-size: 100%;
				}
			}
		}
	}
}

// 选择老师列表
.selectTeacher {
	.big_box {
		width: 686upx;
		margin: 0 auto;
		margin-top: 24upx;

		.box_h {
			width: 336upx;
			background: #ffffff;
			border-radius: 8upx;
			padding-bottom: 34upx;
			margin-bottom: 14upx;

			.box_img {
				width: 100%;
				border-radius: 8upx;
				overflow: hidden;
				position: relative;

				.imk {
					width: 100%;
					height: 100%;
				}

				.qian3 {
					position: absolute;
					right: 20upx;
					top: 20upx;
					width: 48upx;
					height: 48upx;
					background: url(@/static/teacher/k.png) no-repeat center;
					background-size: 100%;
				}

				.cancel {
					position: absolute;
					right: 20upx;
					top: 20upx;
					width: 48upx;
					height: 48upx;
					background: url(@/static/teacher/kx.png) no-repeat center;
					background-size: 100%;
				}

				.jiad {
					width: 100%;
					height: 64upx;
					bottom: 0;
					left: 0;
					position: absolute;
					background: rgba(0, 0, 0, 0.3);
					text-align: center;
					line-height: 64upx;
					color: #fff;
					font-size: 24upx;
				}
			}

			.zhuangtai {
				width: 304upx;
				margin: 0 auto;
				margin-top: 24upx;
				display: flex;
				justify-content: space-between;

				.zl {
					color: #000;
					font-size: 32upx;
					font-weight: 550;
					flex: 1;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;

					.jiya {
						display: inline-block;
						color: #333;
						font-size: 20upx;
						margin-left: 14upx;
						font-weight: 500;
					}
				}

				.zr {
					width: 46upx;
					height: 46upx;
					text-align: center;
					line-height: 46upx;
					border: 2upx solid rgba(0, 0, 0, 0.14);
					color: #000;
					font-size: 20upx;
					border-radius: 23upx;

					&.man {
						color: #ff3f4a;
					}
				}
			}

			.nam_box {
				width: 304upx;
				margin: 0 auto;
				margin-top: 28upx;
				display: flex;
				justify-content: space-between;

				.name {
					color: #999;
					font-size: 24upx;
					line-height: 30upx;
				}

				.dian {
					color: #999;
					font-size: 22upx;
					line-height: 30upx;

					&.yic {
						color: #8a8a8a;
					}

					.icon {
						width: 30upx;
						height: 30upx;
						background: url(@/static/teacher/dian.png) no-repeat center;
						background-size: 100%;
						display: inline-block;
						vertical-align: middle;
						margin-top: -8upx;
						margin-right: 8upx;

						&.dians {
							background: url(@/static/teacher/diany.png) no-repeat center;
							background-size: 100%;
						}
					}
				}
			}
		}
	}
}
</style>
